<template>
    <div class="page">
      <h1>{{particulars.title}}</h1>
      <div class="page-message">
        <div style="margin-top: 15px;margin-left: 10px">
        <el-button type="danger" size="mini">{{particulars.writeCode}}</el-button>
        <span style="margin-left: 10px;font-size: 18px;font-weight: bold"><a>紫檀添香</a></span>
        <span style="margin-left: 10px;font-size: 18px;font-weight: bold">{{particulars.createBy}}</span>
        <span style="margin-left: 10px;font-size: 18px;font-weight: bold"><icon class="el-icon-view"/>{{particulars.watch}}</span>
        <span style="margin-left: 10px;font-size: 18px;font-weight: bold"><icon :style="likesColor" class="el-icon-star-on" @click="likes($route.params.myid)"/>{{particulars.likes}}</span>
        </div>
        <div style="margin-top: 10px;margin-left: 10px">
          <el-button type="primary" plain size="mini">分类专栏</el-button>
          <span style="margin-left: 10px"><el-button type="danger"  size="mini" round>持续集成</el-button></span>
          <span style="margin-left: 10px"><el-button type="danger" size="mini" round>k8s</el-button></span>
        </div>
      </div>
      <!--文章部分-->
      <div class="page-subject">
        <div style="margin:10px" class="markdown-body"  v-html="particulars.content">
        </div>
      </div>
      <!--评论部分-->
      <div style="margin-top: 10px ;border-top: 2px solid #24292e">
        <div style="display: flex;justify-content: space-between;margin-top:20px">
          <div>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
          </div>
          <div style="width: 1000px">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="优质评论可以帮助作者获得更高权重"
              v-model="comment.content">
            </el-input>
          </div>
          <div>
            <el-button type="danger" @click="publishAll">发表评论</el-button>
          </div>
        </div>
       <!-- 评论部分   -->
        <div v-for="(item,index) in data" :key="index" style="display: flex;border-top: 1px solid #24292e;margin-top: 20px">
          <div style="margin-right: 20px;margin-top: 10px">
            <el-avatar :src="item.userImg"/>
          </div>
          <div >
          <div>
            <h4 style="color: darkcyan">{{item.username}}</h4>
            <p>{{item.content}}</p>
            <span>{{item.createBy}}</span>
            <span style="margin-left: 40px;"><icon class="el-icon-star-on"/> {{item.likes}}</span>
            <span style="color:#3a8ee6;margin-left: 20px"  @click="stair(item.id)">回复</span>
            <span style="color:#3a8ee6;margin-left: 20px">举报</span>
          </div>
           <div style="display: flex;margin-top: 10px" v-for="(ite,index) in item.commentList" :key="index">
             <div style="margin-right: 20px;">
               <el-avatar :src="ite.userImg"/>
             </div>
               <div>
                 <h4 style="color: darkcyan">{{ite.username}}</h4>
                 <p><el-link type="danger" style="margin-right: 10px" v-show="ite.revert!=null">@ {{ite.revert}}</el-link>{{ite.content}}</p>
                 <span>{{ite.createBy}}</span>
                 <span style="margin-left: 40px;"><icon :style="likesColor" class="el-icon-star-on" @click="discussLikes($route.params.myid)"/> {{ite.likes}}</span>
                 <span style="color:#3a8ee6;margin-left: 20px"  @click="secondStage(item.id,ite.username)"  >回复</span>
                 <span style="color:#3a8ee6;margin-left: 20px">举报</span>
               </div>
           </div>
          </div>
        </div>
          <div>
            <el-dialog
              title="回复"
              :visible.sync="dialogVisible"
              width="30%"
              >
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入评论内容"
                v-model="comment.content">
              </el-input>
              <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="reply">确 定</el-button>
          </span>
            </el-dialog>
          </div>
        <!--评论区结束-->
        </div>
    </div>
</template>

<script>
  /*富文本渲染*/
  import 'github-markdown-css/github-markdown.css'
    import {findById,likesAll,publish,selectAll} from '../api/axiosRequest'
    export default {
    name:'',
      data(){
       return{
         dialogVisible: false,//回复弹窗
         comment:{
           content:'',//内容
           username:'紫檀添香',
           blogId:0,
           parentId:0,
           revert:null,
         },
         likesColor:'',
         particulars:{
           title:'',
           description:'',
           createBy:'',
           content:'',
           watch:0,
           discuss:0,
           likes:0,
           writeCode:''
         },
         data:[],
         defaultProps: {
           children: 'commentList',
           label: 'username'
         }
       }
      },
      /*声明周期*/
      mounted() {
        console.log(this.$route.params.myid)
        this.requestFindById(this.$route.params.myid);
        this.selectAlls();
      },
      created() {

      },
      methods:{
        requestFindById(myid){
          const _this = this;
          findById("/blog/findById/"+myid).then(res =>{
            res.data.data.writeCode='0'?res.data.data.writeCode="原创":res.data.data.writeCode="转载";
            var MardownIt = require("markdown-it");
            var md = new MardownIt();
           var result =  md.render(res.data.data.content);
            res.data.data.content = result;
            this.particulars = res.data.data;
             console.log(res);
          })
        },
        likes(id){
          if(this.likesColor==='color: red'){
            this.likesColor='';
            this.particulars.likes=this.particulars.likes-1;
          }else{
            this.particulars.likes=this.particulars.likes+1;
            this.likesColor = 'color: red';
            likesAll("/blog/likesAll/"+id).then(res=>{
              res.data.data.likes=this.particulars.likes;
            })
          }
        },
        publishAll(){
          this.comment.blogId=this.$route.params.myid;
          publish('/comment/saveComment',this.comment).then(res =>{
            if(res.data.code===200){
              this.$message({
                message: '恭喜你，评论成功',
                type: 'success'
              });
              this.comment.content='';
            }
          })
        },
        selectAlls(){
          selectAll(this.$route.params.myid).then(res=>{
            console.log(this.$route.params.myid)
            this.data = res.data.data;
            console.log(res,"+++++++++++++")
          }).catch(err =>{
            console.log("出错了",err)
          })
        },
        reply(){
          this.dialogVisible = false;
          console.log(this.comment);
          publish('/comment/saveComment',this.comment).then(res =>{
            if(res.data.code===200){
              this.$message({
                message: '恭喜你，回复成功',
                type: 'success'
              });
              this.comment.content='';
            }
          })
        },
        /*评论喜欢*/
        discussLikes(id){
          if(this.likesColor==='color: red'){
            this.likesColor='';
          }else{
            this.likesColor = 'color: red';
          }
          console.log(id)
        },
        stair(id){
          this.dialogVisible = true;
          this.comment.parentId=id;
          this.comment.blogId=this.$route.params.myid;
          console.log(id)
          console.log(this.comment)
        },
        secondStage(id,username){
          this.comment.blogId=this.$route.params.myid;
          this.dialogVisible = true;
          this.comment.parentId=id;
          this.comment.revert=username;
          console.log(id,username,this.comment.blogId)
          console.log(this.comment)
        }
      }
    }
</script>

<style   lang="scss" >
 .page-message{
   height: 100px;
   max-width: 1200px;
   background: peachpuff;
   border:1px solid salmon;
   border-radius: 10px;
 }
  .page-subject{
    margin-top: 20px;
    height: auto;
    max-width: 1200px;
    background: rgba(255, 218, 185,0.5);
    border:1px solid salmon;
    border-radius: 10px;
  }
 .el-tree-node__content{
   height:50px !important;
 }

</style>
